<!DOCTYPE html>
<head>
	<title data-i18n-content="ext_name"></title>
	<link type="text/css" rel="stylesheet" href="css/bootstrap.2.0.4.min.css" />
	<link type="text/css" rel="stylesheet" href="css/style.css" />
	<script type="text/javascript" src="js/jquery.1.7.2.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.2.0.4.min.js"></script>
	<script type="text/javascript" src="js/assistant.js"></script>
	<script type="text/javascript" src="js/app.category.js"></script>
	<script type="text/javascript" src="js/assistant.revise.js"></script>
	<script type="text/javascript">

		var options = assistant.getOptions();

		jQuery(document).ready(function () {
			assistant.getTranslation();
			assistant.registerCallbacks();

			if (options.auto_extract === 'true') {
				assistant.addItems();
			}

			var server = options.server_url;
			$('#categories').categories({
				count: 4,
				onChange: function (data) {
					$('#category_id').attr('value', data.id);
					if (data.name) {
						$('#category_name').attr('value', data.name);
					}
				},
				apis: {
					children: server + '?c=categories&f=children&category_id=',
					path: server + '?c=categories&f=path&category_id=',
					name: server + '?c=categories&f=name&category_id='
				}
			});

		});

	</script>
</head>
<body>

<div class="navbar navbar-fixed-top">
	<div class="navbar-inner">
		<div class="container-fluid">
			<a class="brand" target="_blank" href="http://code.google.com/p/etao-projects/downloads/list" data-i18n-content="ext_name"></a>
			<p class="nav pull-right">
				<a href="options.html" target="_blank">
					<i class="icon-cog icon-white"></i>&nbsp;
					<span data-i18n-content="action_config"></span>
				</a>
			</p>
		</div>
	</div>
</div>

<div class="container-fluid" id="container">

	<div class="row-fluid">
		<div class="span12">

		<table class="table table-striped table-bordered" id="datalist">
			<thead>
				<tr>
					<th width="18%" data-i18n-content="thead_nid"></th>
					<th width="60%" data-i18n-content="thead_title"></th>
					<th width="22%" data-i18n-content="thead_actions"></th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>
		</div>

	</div>

	<div class="row-fluid">
		<div class="span12">
			<form method="post" action="" class="form-horizontal">

				<div class="control-group">
					<label class="control-label" data-i18n-content="label_category"></label>
					<div class="controls">
						<span id="categories"></span>
						<input type="hidden" name="category_id" id="category_id" value=""/>
						<input type="hidden" name="category_name" id="category_name" value=""/>
					</div>
				</div>

				<div class="form-actions">
					<a href="javascript:void(0)" id="submit" class="btn btn-large btn-info">
						<i class="icon-ok icon-white"></i>&nbsp;
						<span data-i18n-content="action_submit"></span>
					</a>
					<a href="javascript:void(0)" id="extract" class="btn btn-large btn-info">
						<i class="icon-refresh icon-white"></i>&nbsp;
						<span data-i18n-content="action_extract"></span>
					</a>
				</div>

			</form>
		</div>
	</div>

	<footer>
		<p>
			<span data-i18n-content="ext_name"></span>&nbsp;
			<span data-i18n-content="ext_version"></span>&nbsp;by&nbsp;
			<a href="mailto:wangshijun2010@gmail.com">wangshijun2010@gmail.com</a>
		</p>
	</footer>

</div>

</body>
</html>